<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>操作 DOM</title>
</head>
<body>
    <script>
        function attr() {
            $(document).ready(function () {
                $('div.chapter a').attr({ rel: 'external' });
            });
        }

        function multiAttr() {
            $(document).ready(function () {
                $('div.chapter a').attr({
                    rel: 'external',
                    title: 'Learn more at Wikipedia'
                });
            });
        }

        function valueCallback() {
            $(document).ready(function () {
                $('div.chapter a').attr({
                    rel: 'external',
                    title: 'Learn more at Wikipedia',
                    id: function (index, oldValue) {
                        return 'wikilink-' + index;
                    }
                });
            });
        }

        function attrSelectors() {
            $(document).ready(function () {
                $('div.chapter a[href*="wikipedia"]').attr({
                    rel: 'external',
                    title: 'Learn more at Wikipedia',
                    id: function (index, oldValue) {
                        return 'wikilink-' + index;
                    }
                });
            });
        }

        function context() {
            $(document).ready(function () {
                $('div.chapter a[href*="wikipedia"]').attr({
                    rel: 'external',
                    title: function () {
                        return 'Lean more about ' + $(this).text() + ' at Wikipedia.';
                    },
                    id: function (index, oldValue) {
                        return 'wikilink-' + index;
                    }
                });
            });
        }

        function prop() {
            var currentlyChecked = $('.my-checkbox').prop('checked');
            $('.my-checkbox').prop('checked', false);
        }

        function val() {
            var inputValue = $('#my-input').val();
            var selectedValue = $('#my-select').val();
            $('#my-single-select').val('value3');
            $('#my-multi-select').val(['value1', 'value2']);
        }

        function newElement() {
            $(document).ready(function () {
                $('<a href="#top">back to top</a>');
                $('<a id="top"></a>');
            });
        }

        function insertAfter() {
            $(document).ready(function () {
                $('<a href="#top">back to top</a>').insertAfter('div.chapter p');
                $('<a id="top"></a>');
            });
        }

        function prependTo() {
            $(document).ready(function () {
                $('<a href="#top">back to top</a>').insertAfter('div.chapter p');
                $('<a id="top"></a>').prependTo('body');
            })
        }

        function insertBefore() {
            $(document).ready(function () {
                $('span.footnote').insertBefore('#footer');
            })
        }

        function wrapAll() {
            $(document).ready(function () {
                $('span.footnote')
                    .insertBefore('#footer')
                    .wrapAll('<ol id="notes"></ol>')
                    .wrap('<li></li>');
            });
        }

        function foreach() {
            $(document).ready(function () {
                var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');
                $('span.footnote').each(function (index) {
                    $(this).appendTo($notes).wrap('<li></li>');
                });
            });
        }

        function sup() {
            $(document).ready(function () {
                var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');
                $('span.footnote').each(function (index) {
                    $('<sup>' + (index + 1) + '</sup>').insertBefore(this);
                    $(this).appendTo($notes).wrap('<li></li>');
                });
            });
        }

        function append() {
            $('<p>Hello</p>').appendTo('#container');
            $('#container').append('<p>Hellow</p>');
        }

        function reverse() {
            $(document).ready(function () {
                var $notes = $('<ol id="notes"></ol>')
                    .insertBefore('#footer');
                $('span.footnote').each(function (index) {
                    $(this)
                        .before('<sup>' + (index + 1) + '</sup>')
                        .appendTo($notes)
                        .wrap('<li></li>');
                });
            });
        }

        function joinSample() {
            var str = 'a' + 'b' + 'c';
            var strs = ['a', 'b', 'c'].join('');
        }

        function join() {
            $(document).ready(function () {
                var $notes = $('<ol id="notes"></ol>')
                    .insertBefore('#footer');
                $('span.footnote').each(function (index) {
                    $(this)
                        .before(['<sup>', index + 1, '</sup>'].join(''))
                        .appendTo($notes).warn('<li></li>');
                });
            });
        }

        function anchor() {
            $(document).ready(function () {
                var $notes = $('<ol id="notes"></ol>')
                    .insertBefore('#footer');
                $('span.footnote').each(function (index) {
                    $(this).before([
                        '<a href="#footnote-',
                        index + 1,
                        '" id="context-',
                        index + 1,
                        '" class="context">',
                        '<sup>',
                        index + 1,
                        '</sup></a>'
                    ].join(''))
                        .appendTo($notes)
                        .wrap('<li id="footnote-' + (index + 1) + '"></li>');
                });
            });
        }

        function content() {
            $(document).ready(function () {
                var $notes = $('<ol id="notes"></ol>')
                    .insertBefore('#footer');
                $('span.footnote').each(function (index) {
                    $(this)
                        .before([
                            '<a href="#footnote-',
                            index + 1,
                            '" id="context-',
                            index + 1,
                            '" class="context">',
                            '<sup>',
                            index + 1,
                            '</sup></a>'
                        ].join(''))
                        .appendTo($notes)
                        .append([
                            '&nbsp;(<a href="#context-',
                            index + 1,
                            '">context</a>)'
                        ].join(''))
                        .wrap('<li id="footnote-' + (index + 1) + '"></li>');
                });
            });
        }

        function cloneChapter() {
            $('div.chapter p:eq(0)').clone();
        }

        function cloneWidhInsertBefore() {
            $('div.chapter p:eq(0)').clone().insertBefore('div.chapter');
        }

        function relative() {
            $(document).ready(function () {
                $('span.pull-quote').each(function (index) {
                    var $parentParagraph = $(this).parent('p');
                    $parentParagraph.css('position', 'relative');
                });
            });
        }

        function clone() {
            $(document).ready(function () {
                $('span.pull-quote').each(function (index) {
                    var $parentParagrph = $(this).parent('p');
                    $parentParagrph.css('position', 'relative');
                    var $clonedCopy = $(this).clone();
                    $clonedCopy.addClass('pulled').prependTo($parentParagrph);
                });
            });
        }

        function html() {
            $(document).ready(function () {
                $('span.pull-quote').each(function (index) {
                    var $parentParagraph = $(this).parent('p');
                    $parentParagraph.css('position', 'relative');
                    var $clonedCopy = $(this).clone();
                    $clonedCopy
                        .addClass('pulled')
                        .find('span.drop')
                        .html('&hellip;')
                        .end()
                        .prependTo($parentParagraph);
                });
            });
        }
    </script>
</body>
</html>